<template>
  <div class="filter">
    <el-input
      v-if="item.componentType==='input' || item.componentType === 'text'"
      v-model="searchObj[dataIndex]"
      placeholder="按回车键搜索"
      clearable
      @input="inputChange"
      @keyup.enter.native="search()"
    />
    <!-- <el-date-picker
      v-else-if="['yearDateSelect','dayDateSelect','monthDateSelect'].includes(item.componentType)"
      v-model="searchObj[dataIndex]"
      :type="item.componentType === 'yearDateSelect' ? 'year' : item.componentType === 'monthDateSelect' ? 'month' : 'date'"
      :format="item.componentType === 'yearDateSelect' ? 'yyyy' : item.componentType === 'monthDateSelect' ? 'yyyy-MM' : 'yyyy-MM-dd'"
      :value-format="item.componentType === 'yearDateSelect' ? 'yyyy' : item.componentType === 'monthDateSelect' ? 'yyyy-MM' : 'yyyy-MM-dd'"
      :placeholder="'请选择'+item.title"
      @change="search"
      @blur="search"
    /> -->
    <time-picker
      v-else-if="dataPicker(item)"
      v-model="searchObj[dataIndex]"
      :type="dataPicker(item).type"
      :value-format="dataPicker(item).format"
      :personal-style="{
        currentBorderRadius: '6px'
      }"
      @blur="search"
      @change="search"
    />
    <Select-Url
      v-else-if="['select', 'enterpriseIn', 'enterpriseList'].includes(item.componentType)"
      :select-value="searchObj[dataIndex]"
      :placeholder="item.promptText || '请选择'"
      :item="item"
      style="width: 100%;"
      :clearable="true"
      :data-dataIndex="item.dataIndex"
      @change="(obj)=>selectSearchChange(obj, item)"
      @changeItemOption="changeItemOption"
    />
    <select-url-m
      v-else-if="item.componentType === 'batchSelect'"
      :select-value="searchObj[item.dataIndex]"
      :item="item"
      style="width: 100%;"
      :data-dataIndex="item.dataIndex"
      @change="(obj)=>selectSearchChange(obj, item)"
    />
    <SelectTree
      v-else-if="['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item.componentType)"
      :select-value="searchObj[dataIndex]"
      :item="item"
      @changeData="(data)=>treeSelectSearchChange(data, item)"
    />
    <select-tree-m
      v-else-if="item.componentType === 'batchTreeSelect'"
      :select-value="searchObj[item.dataIndex]"
      :item="item"
      @selChange="(arr)=>selChange(arr, item)"
      @changeData="(data)=>treeSelectSearchChange(data, item)"
    />
    <!-- 输入&下拉 -->
    <transition
      v-else-if="item.componentType === 'toggleInputSelect'"
      mode="out-in"
      name="toggleIS"
    >
      {{ item.myToggleFlag }}
      <el-input
        v-if="item.myToggleFlag"
        ref="innerOper"
        v-model="searchObj[dataIndex]"
        clearable
        :placeholder="item.promptText || '请输入'"
        :class="{'myEllipsis': item.ellipsis === 1}"
        style="width: 100%;height: 100%;"
        :data-dataIndex="item.dataIndex"
        :type="item.isNumber === 1 ? 'number' : 'text'"
        @mousewheel.native.prevent
        @input="inputChange"
        @keyup.enter.native="search()"
      >
        <template #prefix>
          <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
            <div class="prefix_icon_bg" />
            <div>切换</div>
            <div>选择</div>
          </div>
        </template>
      </el-input>

      <Select-Url
        v-else
        ref="selectUrl"
        :title="searchObj[dataIndex]"
        :class="{'myEllipsis': item.ellipsis === 1}"
        :placeholder="item.promptText || '请选择'"
        :clearable="true"
        :item="item"
        :disabled="item.edit === 0"
        style="width: 100%;height: 100%;"
        :data-dataIndex="item.dataIndex"
        :select-value="searchObj[dataIndex]"
        @change="obj=>selectSearchChange(obj, item)"
        @changeItemOption="changeItemOption"
        @toggleChangeComponent="toggleFlag(item)"
      >
        <template #prefix>
          <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
            <div class="prefix_icon_bg" />
            <div>切换</div>
            <div>输入</div>
          </div>
        </template>
      </Select-Url>
    </transition>
  </div>
</template>

<script>
import SelectUrl from '@/components/CommonForm/components/SelectUrl';
import SelectTree from '@/components/CommonForm/components/SelectTree';
import SelectUrlM from '@/components/CommonForm/components/SelectUrlM';
import SelectTreeM from '@/components/CommonForm/components/SelectTreeM';
import TimePicker from '@/components/CommonForm/components/TimePicker';
export default {
  name: 'FilterTable',
  components: {
    SelectUrl,
    SelectUrlM,
    SelectTree,
    SelectTreeM,
    TimePicker
  },
  props: {
    params: {
      type: Object,
      default: () => ({})
    }
  },
  inject: {
    formTable: {
      default: () => ({})
    },
    forceUpdate: {
      default: () => () => {}
    }
  },
  data() {
    return {
      headList: []
    };
  },
  computed: {
    searchObj() {
      return this.formTable().searchObj;
    },
    dataIndex() {
      return this.params.column.property;
    },
    item() {
      return this.headList.find(item => item.dataIndex === this.dataIndex);
    }
  },
  created() {
    this.headList = [];
    const headDeal = (arr) => {
      arr.forEach(item => {
        if (item.children && item.children.length) {
          headDeal(item.children);
        } else {
          this.headList.push(item);
        }
      });
    };
    headDeal(this.formTable().headers);
  },
  methods: {
    inputChange() {
      this.forceUpdate();
      this.$forceUpdate();
    },
    // 下拉框change
    selectSearchChange(obj, item) {
      if (['select', 'toggleInputSelect'].includes(item.componentType)) {
        const { dataIndex, selectViewOptions: { renderKey }} = item;
        this.formTable().searchObj[dataIndex] = obj[renderKey];
        // const { dataIndex, selectViewOptions: { renderValue }} = item;
        // this.formTable().searchObj[dataIndex] = obj[renderValue];
      } else if (['batchSelect'].includes(item.componentType)) {
        // 多选下拉
        const { dataIndex } = item;
        this.formTable().searchObj[dataIndex] = obj;
      }
      this.$forceUpdate();
      this.search();
    },
    search() {
      this.formTable().searchReport(this.searchObj);
    },
    // 树状下拉框change
    treeSelectSearchChange(treeData, item) {
      const { data } = treeData;
      // const { dataIndex, selectViewOptions: { renderValue }} = item;
      const { dataIndex, selectViewOptions: { renderKey }} = item;
      if (['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item.componentType)) {
        // const { dataIndex, selectViewOptions: { renderKey }} = item;
        this.formTable().searchObj[dataIndex] = data[renderKey];
        // this.formTable().searchObj[dataIndex] = data[renderValue];
      } else if (['batchTreeSelect'].includes(item.componentType)) {
        // 多选树状
        // const { dataIndex, selectViewOptions: { renderKey }} = item;
        this.formTable().searchObj[dataIndex] = this.formTable().searchObj[dataIndex].concat(data[renderKey]);
        // this.formTable().searchObj[dataIndex] = this.formTable().searchObj[dataIndex].concat(data[renderValue]);
      }
      this.$forceUpdate();
      this.search();
    },
    // 树状多选点叉号
    selChange(arr, item) {
      const { dataIndex } = item;
      this.formTable().searchObj[dataIndex] = arr;
      this.search();
    },
    changeItemOption(payload) {
      const { item, option } = payload;
      item.opintion = option;
    },
    // 时间选择器类型
    dataPicker(item) {
      const { componentType } = item;
      const typesMap = {
        'yearDateSelect': {
          format: 'yyyy',
          type: 'year'
        },
        'monthDateSelect': {
          format: 'yyyy-MM',
          type: 'month'
        },
        'dayDateSelect': {
          format: 'yyyy-MM-dd',
          type: 'date'
        },
        'monthDateSelectRange': {
          format: 'yyyy-MM',
          type: 'monthrange'
        },
        'dayDateSelectRange': {
          format: 'yyyy-MM-dd',
          type: 'daterange'
        }
      };

      if (componentType in typesMap) {
        return typesMap[componentType];
      } else {
        return false;
      }
    },
    toggleFlag(item) {
      console.log(item);
      this.$set(item, 'myToggleFlag', !item.myToggleFlag);
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss" scoped>
  .filter{
    // ::v-deep .el-form-item__content{
      width: 180px;
    // }
  }
  .myEllipsis /deep/ input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefix_icon {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: hidden;

  > div {
    height: 33%;
    position: relative;
    // top: -5px;
    color: #fff;
    // position: absolute;
  }
    .prefix_icon_bg {
      height: 35px;
      width: 30px;
      position: absolute;
      background-color: #1492FF;
      top: 2px;
      border-radius: 2px;
    }
}
// .prefix_icon_search{
//   > div {
//     top: -5px;
//     // position: absolute;
//   }
// }
</style>
